<template>
  <sc-dialog title="角色权限设置" v-model="visible" width="65%" destroy-on-close @closed="$emit('closed')">
    <el-container>
      <el-header class="header-tabs">
        <el-tabs type="card" v-model="params.platform" @tab-change="tabChange">
          <el-tab-pane label="综合管理平台" :name="1"></el-tab-pane>
          <el-tab-pane label="客户端" :name="2"></el-tab-pane>
          <el-tab-pane label="移动端" :name="3"></el-tab-pane>
        </el-tabs>
      </el-header>
      <el-main class="nopadding">
        <scTable ref="table" @dataChange="callBack" :apiObj="listData" v-bind:params="params" row-key="id" stripe border hidePagination hideDo expand>
          <el-table-column type="selection" width="50">
            <template #default="scope">
              <el-checkbox v-model="scope.row.hasAuth"></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column align="left" header-align="center" prop="title" label="菜单名称" width="280">
            <template #default="scope">
              <span>{{ scope.row.title }}</span>
            </template>
          </el-table-column>
          <el-table-column label="权限" align="left">
            <template #default="scope">
              <el-checkbox-group v-model="permissionCodeIds">
                <template v-for="item in scope.row.menuPermissionList" :key="item.id">
                  <el-checkbox style="width: 90px" :hasAuth="item.hasAuth" :label="item.code">
                    {{item.name}}
                  </el-checkbox>
                </template>
              </el-checkbox-group>
            </template>
          </el-table-column>
        </scTable>
      </el-main>
    </el-container>
    <template #footer>
      <el-button @click="visible=false">取 消</el-button>
      <el-button type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
    </template>
  </sc-dialog>
</template>

<script>
export default {
  emits: ['success', 'closed'],
  data() {
    return {
      visible: false,
      isSaveing: false,
      params: {
        platform: 1,
        roleId: null
      },
      //表格返回信息
      listData: {},
      listDataInfo: {},
      permissionCodeIds: [],//权限码Id
      menuIdList: [],//选中的菜单
    }
  },
  mounted() {
  },
  methods: {
    //获取菜单列表信息
    open(role) {
      this.visible = true;
      this.params.roleId = role.id;
      this.initData();
    },
    //初始化信息
    async initData() {
      //所有菜单
      this.listData = this.$API.menu.getMenuTreeByRole;
      //角色权限
      var rolePermissionInfo = await this.$API.menu.getMenuPermissionListByRole.get(this.params);
      if (rolePermissionInfo.code == 200) {
        rolePermissionInfo.data.forEach(item => {
          this.permissionCodeIds.push(item.code);
        })
      }
    },
    tabChange() {
      this.$refs.table.loadData(this.params);
    },
    //保存
    async submit() {

      this.isSaveing = true;
      this.menuIdList = [];
      this.loadSelect(this.listDataInfo);
      var par = {
        roleId: this.params.roleId,
        platform: this.params.platform,
        menuIdList: this.menuIdList,
        permissionCodeList: this.permissionCodeIds,
      };
      var res = await this.$API.role.updateRoleMenu.put(par);
      if (res.code === 200) {
        this.$Message.success("操作成功！");
        this.visible = false;
      } else {
        this.$Message.warning(res.msg);
      }
      this.isSaveing = false;
    },
    //获取选中菜单项
    loadSelect(listInfo) {
      listInfo.forEach(element => {
        if (element.hasAuth) {
          this.menuIdList.push(element.id);
        }
        if (element.children) {
          this.loadSelect(element.children);
        }
      });
    },
    //获取列表信息
    callBack(res, tableData) {
      this.listDataInfo = tableData;
    },
  }
}
</script>

<style scoped>
.treeMain {
  height: 280px;
  overflow: auto;
  border: 1px solid #dcdfe6;
  margin-bottom: 10px;
}
</style>
